<template>
  <div class="main">
    <div class="top-div-left">
      <!-- <span class="currenTime"> 济南</span>
      <span class="currenTime"> 🌤 </span>
      <span class="currenTime"> {{ currentDate }}{{ currentTime }}</span> -->

      <div class="weather" v-for="(item, index) in weather" :key="index">
        <!-- <div>济南</div>
          <div>
            <img src="" alt="">
          </div>
          <div>晴</div>
          <div>6-13℃</div> -->

        <div class="currenTime">{{ item.city }}</div>
        <div class="currenTime">
          <img class="weatherIcon" style="width: 1.5625vw; height: 2.7778vh" :src="require('@/assets/weather/' + item.weather + '.png')" />
        </div>
        <div class="currenTime">{{ item.weather }}</div>
        <div class="currenTime">{{ item.temperature }}℃</div>
      </div>
    </div>

    <div class="top-div-left" style="display: flex">
      <span style="width: 9vw; height: 3vh; text-align: center">
        <!-- <img
          src="@/assets/images/screen/pageTitleLeft.png"
          alt=""
          style="width: 100%; height: 100%;"
      /> -->
      </span>
      <span style="width: 49vw; height: 5vh">
        <img src="@/assets/images/screen/logintitle.png" style="width: 18vw; height: 5vh" alt="" />
      </span>
      <span style="width: 9vw; height: 3vh; text-align: center">
        <!-- <img
          src="@/assets/images/screen/pageTitleRight.png"
          alt=""
          style="width: 100%; height: 100%;"
        /> -->
      </span>
    </div>
    <div class="top-div-left">
      <span class="currenTime1"> {{ currentDate }}{{ currentTime }}</span>
    </div>
  </div>
</template>

<script>
import jsonp from 'jsonp'
import { mapGetters, mapState } from 'vuex'
import Hamburger from '@/components/Hamburger'
import ErrorLog from '@/components/ErrorLog'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import LangSelect from '@/components/LangSelect'
import Search from '@/components/HeaderSearch'
import defaultAvatar from '@/assets/img/avatar.png'
import { getInfo } from '@/api/sys/user'
import { getMenus } from '@/api/sys/menu'
import Cookies from 'js-cookie'

let getW
export default {
  name: 'ScreenPageTitle',
  components: {
    Hamburger,
    ErrorLog,
    Screenfull,
    SizeSelect,
    LangSelect,
    Search,
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'device']),
    ...mapState({
      topMenu: (state) => state.settings.topMenu,
      fetchRoutes: (state) => state.permission.fetchRoutes,
      addMenus: (state) => state.permission.addMenus,
    }),
    avatarUrl() {
      if (this.avatar === undefined) {
        return defaultAvatar
      }
      return this.avatar
    },
  },

  data() {
    return {
      currentTime: this.getCurrentTime(),
      currentDate: this.getCurrentDate(),
      userName: '',
      getMeunvalue: [],
      weather: null,
      date: null,
      yslist: [
        { id: 0, title: '长江水', value: '809.23' },
        { id: 1, title: '黄河水', value: '8005.12' },
      ],
      gslist: [
        {
          id: 0,
          title: '滨州市',
          value: '0.00',
          color: '#1A5CF9',
          img: '2.png',
        },
        {
          id: 1,
          title: '东营市',
          value: '823.46',
          color: '#F9831A',
          img: '3.png',
        },
        {
          id: 2,
          title: '潍坊市',
          value: '0.00',
          color: '#F9F11A',
          img: '4.png',
        },
        {
          id: 3,
          title: '青岛市',
          value: '6027.44.',
          color: '#891AF9',
          img: '5.png',
        },
        {
          id: 4,
          title: '烟台市',
          value: '0.00',
          color: '#F94D1A',
          img: '6.png',
        },
        {
          id: 5,
          title: '威海市',
          value: '0.00',
          color: '#3FF91A',
          img: '7.png',
        },
      ],
      projectlist: [
        { id: 0, flag: 'bz', img: 'bz.png', padding: 'left: 637px;top: 24px;' },
        {
          id: 1,
          flag: 'mq',
          img: 'mq.png',
          padding: 'left: 850px;top: 110px;',
        },
        {
          id: 2,
          flag: 'sk',
          img: 'sk.png',
          padding: 'left: 975px;top: 169px;',
        },
        { id: 3, flag: 'gd', img: 'gd.png', padding: 'top: 25px;right: 200px;' },
      ],
    }
  },
  created() {},
  mounted() {
    this.getWeathers()
    setInterval(() => {
      this.getWeather()
    }, 3600000)
    setInterval(this.updateClock, 1000)
    let time = setInterval(() => {
      if (Cookies.get('Admin-Token')) {
        getInfo().then((res) => {
          if (res.data.code == 0) {
            this.userName = res.data.data.realname
          }
        })
        getMenus().then((res) => {
          if (res.data.code == 0) {
            this.getMeunvalue = res.data.data
          }
        })
        clearInterval(time)
      }
    }, 1000)
  },
  methods: {
    // 获取天气
    getWeathers() {
      let that = this
      // TODO 济南市
      let citycode = '370100'
      // TODO 德州市
      // let citycode = '371400'
      console.log(window.location.host)
      // if (window.location.host == "10.37.35.10") {
      //   citycode = '371500';
      // }

      jsonp(
        'https://restapi.amap.com/v3/weather/weatherInfo?key=ca5082172a271638aed2ea82d1cfab56&city=' + citycode + '&extensions=base',
        {
          name: 'success_jsonpCallback',
        },
        function (err, data) {
          // console.log(data);

          that.weather = data.lives
        }
      )
    },
    meunClick() {
      this.$emit('meunShow')
    },

    homeClick() {
      if (this.fetchRoutes[1].children !== undefined) {
        if (this.fetchRoutes[1].children) {
          this.$store.dispatch('permission/tegsMenu', this.fetchRoutes[1].children[0])
          this.$router.push(this.fetchRoutes[1].children[0].path)
        } else {
          this.$router.push({ path: '/standardsystem' })
        }
      } else {
        this.$router.push({ path: '/login' })
      }
    },

    //首页头部时间
    updateClock() {
      this.currentTime = this.getCurrentTime()
      this.currentDate = this.getCurrentDate()
    },
    getCurrentTime() {
      const currentDate = new Date()
      const hours = currentDate.getHours()
      const minutes = currentDate.getMinutes()
      const seconds = currentDate.getSeconds()
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    },
    getCurrentDate() {
      const currentDate = new Date()
      const year = currentDate.getFullYear()
      const month = currentDate.getMonth() + 1
      const day = currentDate.getDate()
      const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      const dayOfWeek = daysOfWeek[currentDate.getDay()]
      return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${dayOfWeek}`
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
    },
    showSide(info) {
      this.$emit('showSide', info)
    },
  },
}
</script>

<style lang="scss" scoped>
.weather {
  height: 19vh;
  left: 34px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.main {
  width: 100%;
  height: 10vh;
  // background-color: rgba(2, 54, 68, 0.8);
  position: fixed;
  background-image: url('~@/assets/images/screen/组13.png');
  background-size: 100% 130%;
  display: flex;
  align-items: center;

  justify-content: space-around;
  padding-bottom: 1.0417vw;
  color: white;
  .top-div-left {
    width: calc(100vw / 3);
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .top-div-left:nth-child(2) {
    span {
      margin-bottom: 0.2604vh;
      text-align: center;
      white-space: nowrap;
      letter-spacing: 3px;
      z-index: 10;
      text-align: center;
      color: rgb(255, 254, 254);
      font-size: 1.6063vw;
      font-family: zihun143-zhengkuchaojihei;
      font-weight: 400;
      font-style: italic;
      text-shadow: rgb(0, 0, 0) 0px 6px 10px;
      background: linear-gradient(0deg, rgb(0, 184, 191) 0%, rgb(255, 255, 255) 100%) text;
      -webkit-text-fill-color: transparent;
    }
  }

  .top-div-left:nth-child(3) {
    display: flex;
    justify-content: flex-end;

    .right-menu {
      span {
        margin-right: 2.0833vw;

        img {
          width: 0.5208vw;
          height: 0.5208vw;
        }
      }
    }
  }

  .currenTime {
    margin-left: 1.4vw;
    text-align: center;
  }
  .currenTime1 {
    margin-right: 1.4vw;
    text-align: center;
  }
}

.weatherIcon {
  margin-top: 0.4vh;
}
</style>
